<template>
    <view class="payment-detail-page">
      <!-- 顶部状态栏 -->
      <!-- <view class="status-bar">
        <view class="status-badge">已付款</view>
      </view> -->
      
      <!-- 基本信息区域 -->
      <view class="info-section">
        <view class="info-item">
          <text class="info-label">供应商</text>
          <text class="info-value">{{ paymentData.supplierName || '无供应商' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">付款日期</text>
          <text class="info-value">{{ paymentData.businessDate || paymentData.createTime }}</text>
        </view>
      </view>
      
      <!-- 付款金额明细 -->
      <view class="payment-section">
        <view class="section-title">付款方式</view>
        
        <!-- 现金 -->
        <view class="payment-item" v-if="paymentData.cashAmount > 0">
          <view class="payment-item-left">
            <view class="payment-icon cash-icon">
              <u-icon name="rmb-circle" color="#fff" size="24"></u-icon>
            </view>
            <text class="payment-method">现金</text>
          </view>
          <text class="payment-amount">¥{{ formatAmount(paymentData.cashAmount) }}</text>
        </view>
        
        <!-- 银行存款 -->
        <view class="payment-item" v-if="paymentData.bankAmount > 0">
          <view class="payment-item-left">
            <view class="payment-icon bank-icon">
              <u-icon name="minus-circle" color="#fff" size="24"></u-icon>
            </view>
            <text class="payment-method">银行存款</text>
          </view>
          <text class="payment-amount">¥{{ formatAmount(paymentData.bankAmount) }}</text>
        </view>
        
        <!-- 微信 -->
        <view class="payment-item" v-if="paymentData.wechatAmount > 0">
          <view class="payment-item-left">
            <view class="payment-icon wechat-icon">
              <u-icon name="weixin-circle-fill" color="#fff" size="24"></u-icon>
            </view>
            <text class="payment-method">微信</text>
          </view>
          <text class="payment-amount">¥{{ formatAmount(paymentData.wechatAmount) }}</text>
        </view>
        
        <!-- 支付宝 -->
        <view class="payment-item" v-if="paymentData.alipayAmount > 0">
          <view class="payment-item-left">
            <view class="payment-icon alipay-icon">
              <u-icon name="zhifubao-circle-fill" color="#fff" size="24"></u-icon>
            </view>
            <text class="payment-method">支付宝</text>
          </view>
          <text class="payment-amount">¥{{ formatAmount(paymentData.alipayAmount) }}</text>
        </view>
        
        <!-- 合计金额 -->
        <view class="payment-total">
          <text class="total-label">合计金额</text>
          <text class="total-amount">¥{{ formatAmount(paymentData.totalAmount) }}</text>
        </view>
      </view>
      
      <!-- 备注信息 -->
      <view class="remark-section" v-if="paymentData.remark">
        <view class="section-title">备注</view>
        <view class="remark-content">
          {{ paymentData.remark }}
        </view>
      </view>
      
      <!-- 操作栏 -->
      <view class="action-bar">
        <button class="action-btn delete-btn" @click="handleDelete">删除</button>
        <button class="action-btn share-btn" @click="handleEdit">编辑</button>
      </view>
      
      <!-- 删除确认弹窗 -->
      <u-modal 
        :show="showDeleteModal" 
        title="确认删除" 
        content="确定要删除该付款单吗？删除后将无法恢复。" 
        @confirm="confirmDelete" 
        @cancel="showDeleteModal = false">
      </u-modal>
    </view>
  </template>
  
  <script>
  import api from '@/utils/api.js';
  
  export default {
    data() {
      return {
        id: null,
        type: null,
        paymentData: {
          supplierName: '',
          businessDate: '',
          totalAmount: 0,
          cashAmount: 0,
          bankAmount: 0,
          wechatAmount: 0,
          alipayAmount: 0,
          remark: ''
        },
        showDeleteModal: false
      };
    },
    onLoad(options) {
      if (options.id) {
        this.id = options.id;
        this.type = options.type || 'paymentOrder';
      } else {
        uni.showToast({
          title: '参数错误',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    onShow() {
      this.loadPaymentData();
    },
    methods: {
      // 加载付款单数据
      loadPaymentData() {
        uni.showLoading({ title: '加载中' });
        
        // 根据单据类型选择API
        let apiPromise;
        if (this.type === 'paymentOrder') {
          // 付款单
          apiPromise = api.getPurchaseDetail(this.id);
        } else {
          // 如果有其他类型，添加对应逻辑
          apiPromise = Promise.reject('不支持的单据类型');
        }
        
        apiPromise.then(res => {
          console.log('付款单数据:', res);
          
          if (res) {
            // 更新基本数据
            this.paymentData = {
              ...this.paymentData,
              ...res,
              // 确保金额有默认值
              totalAmount: res.totalAmount || 0,
              cashAmount: res.cashAmount || 0,
              bankAmount: res.bankAmount || 0,
              wechatAmount: res.wechatAmount || 0,
              alipayAmount: res.alipayAmount || 0
            };
            
            // 如果有供应商ID但没有供应商名称，查询供应商信息
            if (res.supplierId && !res.supplierName) {
              this.loadSupplierName(res.supplierId);
            } else {
              uni.hideLoading();
            }
          } else {
            this.handleApiError(res);
            uni.hideLoading();
          }
        }).catch(err => {
          uni.hideLoading();
          console.error('获取付款单数据失败:', err);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        });
      },
      
      // 加载供应商名称
      loadSupplierName(supplierId) {
        api.getSupplier(supplierId).then(supplierRes => {
          console.log('供应商信息:', supplierRes);
          
          // 更新供应商名称
          if (supplierRes && supplierRes.supplierName) {
            this.paymentData.supplierName = supplierRes.supplierName;
          } else {
            this.paymentData.supplierName = '未知供应商';
          }
          
          uni.hideLoading();
        }).catch(err => {
          console.error('获取供应商信息失败:', err);
          this.paymentData.supplierName = `供应商(ID:${supplierId})`;
          uni.hideLoading();
        });
      },
      
      // 格式化金额显示
      formatAmount(amount) {
        if (amount === undefined || amount === null) return '0.00';
        return parseFloat(amount).toFixed(2);
      },
      
      // 处理删除操作
      handleDelete() {
        this.showDeleteModal = true;
      },
      
      // 处理编辑操作
      handleEdit() {
        uni.navigateTo({
          url: `/pages/receive/edit?id=${this.id}&type=${this.type}`
        });
      },
      
      // 确认删除
      confirmDelete() {
        uni.showLoading({ title: '删除中' });
        
        let apiPromise;
        if (this.type === 'paymentOrder') {
          apiPromise = api.deletePurchase(this.id);
        } else {
          apiPromise = Promise.reject('不支持的单据类型');
        }
        
        apiPromise.then(res => {
          uni.hideLoading();
          
          if (res && res.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            this.handleApiError(res);
          }
        }).catch(err => {
          uni.hideLoading();
          console.error('删除付款单失败:', err);
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          });
        });
        
        this.showDeleteModal = false;
      },
      
      // 处理API错误
      handleApiError(res) {
        console.error('API错误:', res);
        uni.showToast({
          title: res?.msg || '操作失败',
          icon: 'none'
        });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .payment-detail-page {
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 120rpx;
  }
  
  // 顶部状态栏
  .status-bar {
    background-color: #4A8CFF; // 使用蓝色区分付款单
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .status-badge {
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  
  // 基本信息区域
  .info-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: 28rpx;
        color: #666666;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
    }
  }
  
  // 付款方式区域
  .payment-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    
    .section-title {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
    }
    
    .payment-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      .payment-item-left {
        display: flex;
        align-items: center;
      }
      
      .payment-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        
        &.cash-icon {
          background-color: #FFA500;
        }
        
        &.bank-icon {
          background-color: #2196F3;
        }
        
        &.wechat-icon {
          background-color: #07C160;
        }
        
        &.alipay-icon {
          background-color: #1677FF;
        }
      }
      
      .payment-method {
        font-size: 28rpx;
        color: #333333;
      }
      
      .payment-amount {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
    }
    
    .payment-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      
      .total-label {
        font-size: 30rpx;
        color: #333333;
        font-weight: 500;
      }
      
      .total-amount {
        font-size: 36rpx;
        color: #4A8CFF; // 使用蓝色区分付款单
        font-weight: bold;
      }
    }
  }
  
  // 备注区域
  .remark-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    
    .section-title {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
    }
    
    .remark-content {
      padding: 30rpx 0;
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
    }
  }
  
  // 底部操作栏
  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      border-radius: 12rpx;
      margin: 0 10rpx;
    }
    
    .delete-btn {
      background-color: #ffffff;
      color: #FF5252;
      border: 1rpx solid #FF5252;
    }
    
    .share-btn {
      background-color: #ffffff;
      color: #4A8CFF; // 使用蓝色区分付款单
      border: 1rpx solid #4A8CFF;
    }
  }
  </style> 